<script setup lang="ts">
import { formatPrice, formatTime } from '@/utils/mall'

interface Coupon {
  id: string
  name: string
  type: 'fixed' | 'percent' | 'shipping'
  value: number
  minAmount: number
  maxDiscount?: number
  validFrom: string
  validTo: string
  description: string
  status: 'active' | 'used' | 'expired'
}

interface Props {
  coupon: Coupon
  mode?: 'list' | 'select'
  selected?: boolean
}

interface Emits {
  (e: 'use', coupon: Coupon): void
  (e: 'select', coupon: Coupon): void
}

withDefaults(defineProps<Props>(), {
  mode: 'list',
  selected: false
})

defineEmits<Emits>()

// 格式化优惠券值
function formatCouponValue(coupon: Coupon): string {
  switch (coupon.type) {
    case 'fixed':
      return formatPrice(coupon.value)
    case 'percent':
      return `${((1 - coupon.value) * 10).toFixed(1)}折`
    case 'shipping':
      return '包邮'
    default:
      return ''
  }
}

// 格式化使用条件
function formatCouponCondition(coupon: Coupon): string {
  if (coupon.type === 'shipping') {
    return `满${formatPrice(coupon.minAmount)}免运费`
  }
  
  let condition = `满${formatPrice(coupon.minAmount)}可用`
  
  if (coupon.type === 'percent' && coupon.maxDiscount) {
    condition += `，最高优惠${formatPrice(coupon.maxDiscount)}`
  }
  
  return condition
}

// 检查优惠券是否即将过期
function isExpiringSoon(coupon: Coupon): boolean {
  const validTo = new Date(coupon.validTo)
  const now = new Date()
  const threeDaysLater = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000)
  return validTo <= threeDaysLater && validTo > now
}
</script>

<template>
  <view 
    class="coupon-card" 
    :class="{
      expired: coupon.status === 'expired',
      used: coupon.status === 'used',
      expiring: isExpiringSoon(coupon),
      selected: selected && mode === 'select',
      'select-mode': mode === 'select'
    }"
    @click="mode === 'select' ? $emit('select', coupon) : undefined"
  >
    <!-- 选择框 -->
    <view v-if="mode === 'select'" class="radio-wrapper">
      <wd-radio :value="selected" />
    </view>

    <!-- 优惠券主体 -->
    <view class="coupon-main">
      <!-- 左侧金额 -->
      <view class="coupon-value">
        <text class="value-text">{{ formatCouponValue(coupon) }}</text>
        <text class="condition-text">{{ formatCouponCondition(coupon) }}</text>
      </view>

      <!-- 中间信息 -->
      <view class="coupon-info">
        <text class="coupon-name">{{ coupon.name }}</text>
        <text class="coupon-desc">{{ coupon.description }}</text>
        <text class="valid-time">
          有效期：{{ formatTime(coupon.validTo, 'YYYY-MM-DD') }}
        </text>
      </view>

      <!-- 右侧按钮 -->
      <view class="coupon-action">
        <wd-button
          v-if="coupon.status === 'active' && mode === 'list'"
          type="primary"
          size="small"
          @click.stop="$emit('use', coupon)"
        >
          立即使用
        </wd-button>
        
        <view v-else-if="coupon.status === 'used'" class="status-tag used">
          已使用
        </view>
        
        <view v-else-if="coupon.status === 'expired'" class="status-tag expired">
          已过期
        </view>
      </view>
    </view>

    <!-- 即将过期提示 -->
    <view v-if="isExpiringSoon(coupon) && coupon.status === 'active'" class="expiring-tip">
      <wd-icon name="clock" size="12px" color="#ff4142" />
      <text>即将过期</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.coupon-card {
  background: white;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  border: 1px solid transparent;

  &.expired,
  &.used {
    opacity: 0.6;
  }

  &.expiring {
    border-color: #ff4142;
  }

  &.select-mode {
    display: flex;
    align-items: flex-start;
    padding: 16px;

    &.selected {
      border-color: var(--wot-color-theme);
      background: rgba(74, 171, 247, 0.05);
    }

    .radio-wrapper {
      margin-right: 12px;
      padding-top: 2px;
    }

    .coupon-main {
      flex: 1;
      padding: 0;
    }
  }

  .coupon-main {
    display: flex;
    align-items: center;
    padding: 20px;

    .coupon-value {
      width: 100px;
      text-align: center;
      margin-right: 15px;

      .value-text {
        display: block;
        font-size: 24px;
        font-weight: bold;
        color: #ff4142;
        margin-bottom: 4px;
      }

      .condition-text {
        font-size: 10px;
        color: #999;
      }
    }

    .coupon-info {
      flex: 1;
      margin-right: 15px;

      .coupon-name {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
      }

      .coupon-desc {
        display: block;
        font-size: 12px;
        color: #666;
        margin-bottom: 4px;
      }

      .valid-time {
        font-size: 11px;
        color: #999;
      }
    }

    .coupon-action {
      .status-tag {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        text-align: center;

        &.used {
          background: #f0f0f0;
          color: #999;
        }

        &.expired {
          background: #ffe6e6;
          color: #ff4142;
        }
      }
    }
  }

  .expiring-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: #fff5f5;
    border-top: 1px solid #ffe6e6;
    font-size: 12px;
    color: #ff4142;
  }
}
</style>